import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Row,Col,Modal,Tooltip} from 'antd';
import { WeaTableNew } from "comsMobx";
import { WeaDragula,WeaNewScroll,WeaTab,WeaTools,WeaTop,WeaTag,WeaDatePicker,WeaLocaleProvider,WeaSearchGroup,WeaFormItem,WeaCheckbox,WeaBrowser,WeaInput,WeaSelect,WeaRightMenu,WeaPopoverHrm} from 'ecCom';
import SubReport from './SubReport';
import * as Util from '../../../util/Util'
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;
@inject('taskReportStore')
@observer
export default class TaskReport extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showSearchAd :false,
        topTab:[
          {title: getLabel(382619,'按组织'),viewcondition: "2"},
          {title: getLabel(382620,'按人员'),viewcondition: "1"}],
        menu :[
        {key: '0',icon: <i className='icon-coms-search' />,content: getLabel(197,'搜索'),
         onClick: key => this.advanceSearch()},
        {key: '2',icon: <i className='icon-coms-export' />,content: getLabel(17416,'导出'),
         onClick: key => this.doExportData()},
        {key: '1',icon: <i className='icon-coms-Custom'/>,content : getLabel(32535,'显示列定制'),
         onClick : this.showColumn}
        ],
        menu1 :[
          {key: '0',icon: <i className='icon-coms-search' />,content: getLabel(197,'搜索'),
           onClick: key => this.advanceSearch()},
          {key: '2',icon: <i className='icon-coms-export' />,content: getLabel(17416,'导出'),
           onClick: key => this.doExportData()},
          {key: '1',icon: <i className='icon-coms-Bar' />,content: getLabel(382617,'查看图表'),
           onClick: key => this.viewChart(1)}
        ],
        menu2 :[
            {key: '2',icon: <i className='icon-coms-Return' />,content: getLabel(31088,'返回列表'),
             onClick: key => this.viewChart(2)}
        ],
        menu3 :[
          {key: '0',icon: <i className='icon-coms-search' />,content: getLabel(197,'搜索'),
           onClick: key => this.advanceSearch()},
          {key: '2',icon: <i className='icon-coms-export' />,content: getLabel(17416,'导出'),
           onClick: key => this.doExportData()}
        ],
        workerTypeData:[
          {key: "0",selected: false,showname: ""},
          {key: "3",selected: false,showname: getLabel(17494,"所有下属")},
          {key: "2",selected: false,showname: getLabel(382622,"直线下属")},
          {key: "1",selected: true,showname: getLabel(33210,"选择人员")},
        ],
        subData:[
          {key: "3",selected: true,showname: getLabel(18921,"并包含子分部")},
          {key: "1",selected: false,showname: getLabel(18919,"仅本分部")},
          {key: "2",selected: false,showname: getLabel(18920,"仅子分部")},
        ],
        deptData:[
          {key: "3",selected: true,showname: getLabel(18918,"并包含子部门")},
          {key: "1",selected: false,showname: getLabel(18916,"仅本部门")},
          {key: "2",selected: false,showname: getLabel(18917,"仅子部门")},
        ],
        _height:Util.getCurrentHeight(),
        collectParams :{
          favname: getLabel(382489,'任务执行分析'),
          favouritetype: 5,
          link: '/spa/workrelate/static/index.html#/main/workrelate/task/taskIndex?condtype=9',
          importantlevel: 1,
        }
      }
    }
    componentWillMount() {//一些初始化请求
      Util.setWindowKeys(9,getLabel(382489,"任务执行分析"));
      const{taskReportStore} = this.props;
      taskReportStore.getWorkerReport({});
    }
    showColumn = () => {//显示列定制
      const {taskReportStore: { tableStore }} = this.props;
      tableStore.setColSetVisible(true);
      tableStore.tableColSet(true);
    }
    //重置查询条件
    resetSearchAd(){
      const {taskReportStore} = this.props;
      taskReportStore.clearParams();
    }
    //搜索
    advanceSearch(){
      const {taskReportStore} = this.props;
      this.cancleSearchAd(false);
      taskReportStore.getWorkerReport({});
    }
    cancleSearchAd(bool){
      this.setState({showSearchAd:bool});
    }
    //导出
    doExportData(){
      const {taskReportStore} = this.props;
      taskReportStore.doExportData({});
    }
    //查看图表
    viewChart(type){
      const {taskReportStore} = this.props;
      if(type==1){
        const{selectedRowKeys,selectedRows} = taskReportStore;
        if(selectedRowKeys.length==0){
          Modal.warning({
            title: getLabel(558,'提示'),
            content: getLabel(501159, '请选择要操作的数据'),
          });
          return false;
        }
        if(selectedRowKeys.length==1){
          taskReportStore.setPieChart(toJS(selectedRows));
        }else{
          taskReportStore.setBarChart(toJS(selectedRows));
        }
      }else{
        taskReportStore.isechart = 0;
      }
    }
    getTabButtonsAd(ecId) {
      return [
          (<Button ecId={`${ecId}_Button@4gpf1x@search`} type="primary" onClick={()=>this.advanceSearch()}>{getLabel(197,'搜索')}</Button>),
          (<Button ecId={`${ecId}_Button@waa9bk@reset`} type="ghost" onClick={()=>this.resetSearchAd()}>{getLabel(2022,'重置')}</Button>),
          (<Button ecId={`${ecId}_Button@wxgwjz@cancel`} type="ghost" onClick={()=>this.cancleSearchAd(false)}>{getLabel(31129,'取消')}</Button>)
      ]
    }
    onTabChange(v){
      const {taskReportStore}  = this.props;
      taskReportStore.selectedKey = v;
      if((taskReportStore.datalist && taskReportStore.datalist.length>0 && v==2) || (taskReportStore.tableStore.datas && taskReportStore.tableStore.datas.length>0 && v==1)){
        taskReportStore.isechart = 0;
        return false;
      }
      taskReportStore.getWorkerReport({});
    }
    //高级搜索条目
    getSearchsAd(){
      const {taskReportStore}  = this.props;
      const{selectedKey,hrmids,workerType,subcompanyids,cpyincludesub,departmentids,deptincludesub,beginDate,endDate,personType1,personType2,personType3} = taskReportStore;
      const{workerTypeData,subData,deptData} = this.state;
      let arry =[];
      if(selectedKey==1){
        arry.push({com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dy7ek7@workerType`} label={getLabel(30042,'人员')} ratio1to2>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ztdceh@workerType`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l3173o@workerType`} span={11}><WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@v5053x@workerType`} options={workerTypeData} viewAttr={2}  value={workerType} onChange={v => this.onSearchChange(v,"workerType")}/></Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4l978m@hrmidscol`} span={2}></Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xtv0ko@hrmids`} span={11}><WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@tcgugd@hrmids`} type={1} replaceDatas={toJS(hrmids)} onChange={(ids, names, datas) => this.onSearchChange(datas, "hrmids")} title={getLabel(30042,'人员')}/></Col>
        </Row>
        </WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ege509@cpyincludesub`} label={getLabel(33553,'分部')} ratio1to2>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hpqou0@cpyincludesub`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8t6bza@cpyincludesub`} span={11}><WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@z44p27@cpyincludesub`} options={subData} viewAttr={2}  value={cpyincludesub} onChange={v => this.onSearchChange(v,"cpyincludesub")}/></Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bw3df9@subcompanyidscol`} span={2}></Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zux4p6@subcompanyids`} span={11}><WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@52yeqm@subcompanyids`} type={194} replaceDatas={toJS(subcompanyids)} isSingle={false} onChange={(ids, names, datas) => this.onSearchChange(datas, "subcompanyids")} title={getLabel(25512,'多分部')} icon="icon-coms-hrm"/></Col>
        </Row>
        </WeaFormItem>});
        arry.push({com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q7kma4@deptincludesub`} label={getLabel(27511,'部门')} ratio1to2>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3z90ax@deptincludesub`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kc4in0@deptincludesub`} span={11}><WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6nhsmn@deptincludesub`} options={deptData} viewAttr={2}  value={deptincludesub} onChange={v => this.onSearchChange(v,"deptincludesub")}/></Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@59vknf@departmentidscol`} span={2}></Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@irzxki@departmentids`} span={11}><WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@dqp747@departmentids`} type={57} replaceDatas={toJS(departmentids)} isSingle={false} onChange={(ids, names, datas) => this.onSearchChange(datas, "departmentids")}  title={getLabel(83497,'多部门')} icon="icon-coms-hrm"/></Col>
        </Row>
        </WeaFormItem>});
      }
      arry.push({com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@p1ka9w@beginDate`} label={getLabel(30436,'创建时间')} ratio1to2>
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hzd1pg@beginDate`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@eqdwr9@beginDate`} span={11}><WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@a76aub@beginDate`} value={beginDate} onChange={value => this.onSearchChange(value, "beginDate")}/></Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@z6qtaf@endDatecol`} span={2}></Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ywb4ex@endDate`} span={11}><WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@sbvkmw@endDate`} value={endDate} onChange={value => this.onSearchChange(value, "endDate")}/></Col>
      </Row></WeaFormItem>});
      arry.push({com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@b4lqo9@personType1`} label={getLabel(382621,'统计对象')} ratio1to2>
      <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@w116hz@personType1`} content={getLabel(84043,'责任人')} value={personType1} onChange={value=>this.onSearchChange(value, "personType1")}/>
      <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@b5v6gp@personType2`} content={getLabel(382557,'参与人')} value={personType2} onChange={value=>this.onSearchChange(value, "personType2")}/>
      <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@wkhg5h@personType3`} content={getLabel(882,'创建人')} value={personType3} onChange={value=>this.onSearchChange(value, "personType3")}/>
      </WeaFormItem>});
      return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9ot7q7`} title={getLabel(32905,'常用条件')} items={arry} showGroup={true} col={2}/>
    }
    onSearchChange(v,typeid,dtype){
      const{taskReportStore} = this.props;
      taskReportStore[typeid] = v;
    }
    getRightButton(ecId){
      const{taskReportStore} = this.props;
      if(taskReportStore.isechart==0){
        if(taskReportStore.selectedRowKeys.length>0 && taskReportStore.selectedKey==2){
          return [(<Tooltip ecId={`${ecId}_Tooltip@66xxbg@viewchart`} title={getLabel(382617,'查看图表')}><Button ecId={`${ecId}_Button@arkg1f@viewchart`} type='primary' onClick={()=>this.viewChart(1)}>{getLabel(382617,'查看图表')}</Button></Tooltip>)
          ,(<Tooltip ecId={`${ecId}_Tooltip@youeq6@exporttask`} title={getLabel('17416','导出')}><Button ecId={`${ecId}_Button@eh8q5z@exporttask`} type='primary' onClick={()=>this.doExportData()} loading={taskReportStore.exportloading}>{getLabel('17416','导出')}</Button></Tooltip>)
                 ];
        }else{
          return [(<Tooltip ecId={`${ecId}_Tooltip@h8807b@viewchart`} title={getLabel(382617,'查看图表')}><Button ecId={`${ecId}_Button@14nt0x@viewchart`} type='primary' disabled>{getLabel(382617,'查看图表')}</Button></Tooltip>)
          ,(<Tooltip ecId={`${ecId}_Tooltip@ns7db8@exporttask`} title={getLabel('17416','导出')}><Button ecId={`${ecId}_Button@p56njr@exporttask`} type='primary' onClick={()=>this.doExportData()} loading={taskReportStore.exportloading}>{getLabel('17416','导出')}</Button></Tooltip>)
        ];
        }
      }else{
        return [(<Tooltip ecId={`${ecId}_Tooltip@uq8z2t@backlist`} title={getLabel(31088,'返回列表')}><Button ecId={`${ecId}_Button@wq527f@backlist`} type='primary' onClick={()=>this.viewChart(2)}>{getLabel(31088,'返回列表')}</Button></Tooltip>)]
      }
    }
    render() {
      const{showSearchAd,menu,menu1,menu2,menu3,_height,datalist,topTab,ndata,collectParams} = this.state;
      const{taskReportStore} = this.props;
      const{tableStore,selectedKey,isechart,selectedRowKeys} = taskReportStore;
      let currentmenu = menu;
      let _searchType = ["advanced"];
      if(selectedKey==2){
        if(isechart==0){
          if(selectedRowKeys.length>0){
            currentmenu = menu1;
          }else{
            currentmenu = menu3;
          }
        }else{
          _searchType = [];
          currentmenu = menu2;
        }
      }
      return (
        <div className="wea-workrelate-task-taskreport" style={{height:_height}}>
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@k61vzo`}/>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@zr64r8`} datas={currentmenu} showUrlItem={false} style={{height:'100%'}} collectParams={collectParams}>
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@1yz6tv`}
              title={getLabel(382489,'任务执行分析')}
              icon={<i className='icon-coms-implement' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {this.getRightButton(this.props.ecId || '')}
              showDropIcon={true}
              dropMenuDatas = {currentmenu}
            />
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7ee4yv`}
                datas={topTab}
                searchType={_searchType}
                showSearchAd={showSearchAd}
                keyParam="viewcondition" //主键
                selectedKey={selectedKey}
                hideSearchAd = {()=>this.cancleSearchAd(false)}
                setShowSearchAd={bool => {this.cancleSearchAd(bool)}}
                buttonsAd={this.getTabButtonsAd(this.props.ecId || '')}
                searchsAd={this.getSearchsAd()}
                onChange={(v) =>this.onTabChange(v)}
              />
              {selectedKey==1 && <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@c32ho7`} // table内部做了loading加载处理，页面就不需要再加了
                comsWeaTableStore={tableStore} // table store
                hasOrder={true} // 是否启用排序
                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
              />}
              {selectedKey==2 && <SubReport ecId={`${this && this.props && this.props.ecId || ''}_SubReport@5wrbsl`} _height={_height}/> }
          </WeaRightMenu>
          
        </div>
    )
  }
};